<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../../_jquery/jquery-1.3.2.js"></script>
	<script src="../resizable.jquery.js"></script>
	<script src="resizable.example.js"></script>
	<title>Unobtrusive jQuery Resizable Elements</title>
<style>
	.resizable {
		width: 160px;
		height: 120px;
		padding: 10px;
		background: pink;
		border: 1px solid red;
		}

	.handle {
		width: 32px;
		height: 24px;
		padding: 1px;
		background: #9999FF;
		border: 1px solid green;
		}

	#inside .resizable {
		position: relative;
		}

	#inside .handle {
		position: absolute;
		bottom: 0;
		right: 0;
		}

	#inside_vertical .resizable {
		position: relative;
		}

	#inside_vertical .handle {
		position: absolute;
		top: 0;
		right: 0;
		}

	#resize_two #two1,
	#resize_two #two2 {
		float: left;
		}
</style>
</head>
<body>
	<div id="regular">
		<h2>Regular</h2>
		<div class="resizable"></div>
	</div>

	<div id="inside">
		<h2>Handle Inside Resized Element</h2>
		<div class="resizable">
			<div class="handle"></div>
		</div>
	</div>

	<div id="inside_vertical">
		<h2>Handle Inside Resized Element, Vertical Resizing Disabled</h2>
		<div class="resizable">
			<div class="handle"></div>
		</div>
	</div>

	<div id="resize_two">
		<h2>Resize Two Elements</h2>
		<div class="handle"></div>
		<div class="resizable" id="two1"></div>
		<div class="resizable" id="two2"></div>
	</div>
</body>
</html>